<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    
    ES10方法扩展 - DSRBLOG
    
  </title>
  

  
  
  <link href="atom.xml" rel="alternate" title="DSRBLOG" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/style.min.css">
  <link rel="stylesheet" href="asset/css/doc.css">
  <script src="asset/app.js"></script>


</head>

<body> <section class="ct-body">
	<div class="container">
		<div class="columns is-variable bd-klmn-columns is-4 is-centered">
			<div class="column is-four-fifths">
				<div class="post-body single-content">
					
					<h1 class="title">
						ES10方法扩展
					</h1>


					<div class="media">
						
						
						<div class="media-content">
							<div class="content">
								<p>
									<span class="date">2022/10/23 18:16 下午</span>
									

									

									<br />
									<span class="tran-tags">Tags:</span>&nbsp;
									
									<a class="tag is-link is-light">#ES7-11</a>
									

								</p>
							</div>
						</div>

					</div>
				</div>
				<article class="markdown-body single-content">
					<h2><a id="%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E6%89%A9%E5%B1%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>对象方法扩展</h2>
<h3><a id="object-fromentries" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Object.fromEntries()</h3>
<p>类似<code>ES8</code>新特性中<code>Object.entries()</code>方法的逆运算，可以将<code>Array</code>与<code>Map</code>转换为<code>Object</code></p>
<pre class="line-numbers"><code class="language-js">//二维数组
const array = Object.fromEntries([
    ['name', 'GDUST'],
    ['campus', ['南城','松山湖']]
])

console.log(array);
//输出：{name: 'GDUST', campus: ['南城', '松山湖']}

//Map
const m = new Map();
m.set('name','厂科');
m.set('campus',['城里','湖里']);
const map = Object.fromEntries(m);

console.log(map);
//输出：{name: '厂科', campus: ['城里', '湖里']}
</code></pre>
<h2><a id="%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E6%89%A9%E5%B1%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>字符串方法扩展</h2>
<h3><a id="%E5%A3%B0%E6%98%8E%E5%AD%97%E7%AC%A6%E4%B8%B2" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>声明字符串</h3>
<pre class="line-numbers"><code class="language-js">let str = '   GDUST   ';
console.log(`'${str}'`);
//输出：'   GDUST   '
</code></pre>
<h3><a id="trim" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>trim</h3>
<p><code>.trim()</code>是<code>ES5</code>中的方法，用于清除字符串两端的空白字符</p>
<pre class="line-numbers"><code class="language-js">console.log(`'${str.trim()}'`);
//输出：'GDUST'
</code></pre>
<h3><a id="trimstart" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>trimStart</h3>
<p><code>.trimStart()</code>方法用于清除字符串左侧的字符</p>
<pre class="line-numbers"><code class="language-js">console.log(`'${str.trimStart()}'`);
//输出：'GDUST   '
</code></pre>
<h3><a id="trimend" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>trimEnd</h3>
<p><code>.trimEnd()</code>方法用于清除字符串右侧的字符</p>
<pre class="line-numbers"><code class="language-js">console.log(`'${str.trimEnd()}'`);
//输出：'   GDUST'

</code></pre>
<h2><a id="%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E6%89%A9%E5%B1%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>数组方法扩展</h2>
<h3><a id="flat" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>flat</h3>
<p><code>.flat()</code>方法可以将多维数组的维度降低，<code>()</code>内的参数为深度，表示需要将多维数组降低几个维度</p>
<ul>
<li>若不指定深度，则默认为1</li>
<li>若指定深度为<code>Infinity</code>，则会将任意纬度的数组降低到一维数组</li>
</ul>
<pre class="line-numbers"><code class="language-js">const arr = [1,2,3,4,[5,[6,7]]];
console.log(arr.flat(2)); //输出：[1, 2, 3, 4, 5, 6, 7]
</code></pre>
<h3><a id="flatmap" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>flatMap</h3>
<h4><a id="map%E6%96%B9%E6%B3%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>map方法</h4>
<p><code>.map()</code>方法用于创建一个新数组，由原数组调用每一个元素的返回值组成</p>
<pre class="line-numbers"><code class="language-js">const arr = [1, 2, 3, 4];
const map = arr.map(item =&gt; item * 10);
console.log(map); //输出：[10, 20, 30, 40]
</code></pre>
<h4><a id="flatmap%E6%96%B9%E6%B3%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>flatMap方法</h4>
<p>与<code>.map()</code>方法类似，若新数组是多维数组，将会降低一个维度</p>
<pre class="line-numbers"><code class="language-js">const arr = [1, 2, 3, 4];
const map = arr.map(item =&gt; [item * 10]);
console.log(map); //输出：[[10], [20], [30], [40]]

const flatmap = arr.flatMap(item =&gt; [item * 10]);
console.log(flatmap); //输出：[10, 20, 30, 40]
</code></pre>
<h2><a id="symbol%E6%96%B9%E6%B3%95%E6%89%A9%E5%B1%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Symbol方法扩展</h2>
<h3><a id="symbol-prototype-description" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Symbol.prototype.description</h3>
<p>该属性用于获取Symbol的描述字符串</p>
<pre class="line-numbers"><code class="language-js">let s = Symbol('GDUST');
console.log(s.toString()); //输出：Symbol(GDUST)
console.log(s.description); //输出：GDUST
</code></pre>

				</article>
				<div class="comments-wrap">
					<div class="share-comments">
						

						

						
					</div>
				</div><!-- end comments wrap -->
			</div>
		</div><!-- end columns -->
	</div><!-- end container -->
</section>  














<script src="asset/prism.js"></script>









</body>

</html>